<template>
   <div class="app-container">
      <t-Search />
      <el-button :icon="Plus" type="primary" @click="addUser" plain>新增</el-button>
      <el-button :icon="Edit" type="warning" @click="editUser" plain>修改</el-button>
      <el-button :icon="Delete" type="danger" @click="param.dialogVisible = true" plain>删除</el-button>
      <el-button :icon="Download" type="info" plain>导入</el-button>
      <el-button :icon="Upload" type="primary" plain>导出</el-button>

      <Table v-bind="table" @pageChange="onTablePageChange" @activEdit="activEdit" @selectionChange="selectionChange" />

      <!-- dialog -->
      <el-dialog v-model="param.dialogTableVisible" :title="param.title">
         <el-form label-position="right" inline label-width="68px" :model="formLabelAlign"
            style="min-width: 600px;padding:10px">
            <el-form-item label="账户">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="密码">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="用户名称">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="联系方式">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="用户邮箱">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="角色">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="状态">
               <el-input v-model="formLabelAlign.name" />
            </el-form-item>
         </el-form>
      </el-dialog>

      <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
         <span>确认删除？</span>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="param.dialogVisible = false">是的</el-button>
               <el-button type="primary" @click="param.dialogVisible = false">
                  取消
               </el-button>
            </div>
         </template>
      </el-dialog>

   </div>
</template>

<script setup>
import Table from '@/components/table'
import tSearch from '@/components/table/search'
import { onMounted, reactive } from 'vue';
import {
   Plus,
   Delete,
   Edit,
   Message,
   Search,
   Download,
   Upload
} from '@element-plus/icons-vue'

const param = reactive({
   pageNum: 0,
   pageSize: 10,
   dialogTableVisible: false,
   dialogVisible: false,
   title: '添加用户'
});
const table = reactive({
   // 列表数据（必传）
   data: [],
   // 表头内容（必传，注意格式）
   header: [
      { key: 'time', colWidth: '120', title: '进场时间', type: 'text', isCheck: true },
      { key: 'activityId', colWidth: '120', title: '活动id', type: 'text', isCheck: true },
      {
         key: 'operate',
         colWidth: '160',
         title: '操作',
         type: 'operate',
         isCheck: true,
         fixed: 'right',
         buttons: [
            {
               name: '详情',
               type: 'primary',
               command: 'selectionChange',
            },
            {
               name: '注销',
               type: 'primary',
               command: 'logout',
               isPopconfirm: true,
               popconfirmTitle: "确认注销用户？",
               isShow: (row) => {
                  return row.activityId == '1';
               },
            },
            {
               name: '编辑',
               type: 'primary',
               command: 'activEdit',
               isShow: (row) => {
                  return row.activityId == '1';
               },
            },
         ],
      },
   ],
   // table配置项（必传）
   config: {
      isSelection: true,
      isList: true,
      isPagination: true, // 是否分页
      total: 0, // 分页总数
      loading: false
   },
   button: [
      { label: '查询', buttonType: 'primary', icon: "Plus" },
      // { label: '重置', buttonType: '', type: 'refresh' },
      // { label: '新增', buttonType: 'success', type: 'add' },
   ],
});

const search = reactive({
   // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）default:默认值
   type: [
      { label: '堆场名称', prop: 'marketingName', placeholder: '请输入', required: false, type: 'input' },
      // {
      //    label: '活动状态',
      //    prop: 'activityStatus',
      //    placeholder: '请选择',
      //    required: false,
      //    type: 'select',
      //    value: '',
      //    options: [
      //       { label: '有效', value: 1 },
      //       { label: '无效', value: 0 },
      //       { label: '全部', value: '' },
      //    ],
      // },
      // {
      //    label: '创建日期',
      //    prop: 'createDate',
      //    placeholder: '请选择',
      //    required: false,
      //    type: 'daterange',
      //    value: data.value.defaulTtoday,
      // },
      // {
      // 	label: '注销审核状态',
      // 	prop: 'isSupport',
      // 	placeholder: '请选择',
      // 	required: false,
      // 	type: 'select',
      // 	value: '',
      // 	options: [
      // 		{ label: '全部', value: '' },
      // 		{ label: '待审核', value: 0 },
      // 		{ label: '审核通过', value: 0 },
      // 		{ label: '审核拒绝', value: 0 },
      // 	],
      // 	onChange: (data) => {},
      // },
   ],
   // 搜索栏按钮
   button: [
      { label: '查询', buttonType: 'primary', type: 'search' },
      // { label: '重置', buttonType: '', type: 'refresh' }, 
   ],
})


const formLabelAlign = reactive({
   name: '',
   region: '',
   date1: '',
   date2: '',
   delivery: false,
   type: [],
   resource: '',
   desc: ''
})

onMounted(() => {
   //getTableData();
   table.data = [
      {
         time: '2016-05-03',
         activityId: '1',
         address: 'No. 189, Grove St, Los Angeles',
      },
      {
         time: '2016-05-03',
         activityId: 'Tom',
         address: 'No. 189, Grove St, Los Angeles',
      },
   ]
   table.config.total = 2
})


function getTableData () {
   let params = {
      page: param.pageNum,
      size: param.pageSize,
   };
   table.config.loading = true;
   // 获取列表数据
   // getList(param).then(res => {
   //    table.data = res.data.list;
   //    table.config.total = res.data.total;
   // });
   table.config.loading = false;
}

//编辑
const activEdit = (row) => {
   // data.value.activityId = row.activityId;
   // data.value.handleOperate = 'edit';
   param.dialogTableVisible = true;
};
const selectionChange = (row) => {
   // data.value.activityId = row.activityId;
   // data.value.handleOperate = 'edit';
   param.dialogTableVisible = true;
};


//分页
function onTablePageChange (page) {
   param.pageNum = page.pageNum;
   param.pageSize = page.pageSize;
   getTableData();
};


//add
function addUser () {
   param.dialogTableVisible = true
   param.title = "添加用户"
}
function editUser () {
   param.dialogTableVisible = true
   param.title = "编辑用户"
}

</script>
